<template>
    <el-dialog title="新增员工" :visible="showDialog" @close="btnCancel">
        <!-- 表单 -->
        <el-form ref="addEmployee" :model="formData" :rules="rules" label-width="120px">
            <el-form-item label="姓名" prop="username">
                <el-input style="width:50%" placeholder="请输入姓名" v-model="formData.username" />
            </el-form-item>
            <el-form-item label="手机" prop="mobile">
                <el-input style="width:50%" placeholder="请输入手机号" v-model="formData.mobile" />
            </el-form-item>
            <el-form-item label="入职时间" prop="timeOfEntry">
                <el-date-picker style="width:50%" placeholder="请选择入职时间" v-model="formData.timeOfEntry" />
            </el-form-item>
            <el-form-item label="聘用形式" prop="formOfEmployment">
                <el-select style="width:50%" placeholder="请选择" v-model="formData.formOfEmployment">
                    <el-option v-for="item in EmployeeEnum.hireType" :key="item.id" :label="item.value"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="工号" prop="workNumber">
                <el-input style="width:50%" placeholder="请输入工号" v-model="formData.workNumber" />
            </el-form-item>
            <el-form-item label="部门" prop="departmentName">
                <el-input @focus="getDepartments" style="width:50%" placeholder="请选择部门"
                    v-model="formData.departmentName" />
                <!-- 树形结构 -->
                <el-tree v-loading="loading" v-if="showTree" :data="treeData" :props="{ label: 'name' }"
                    @node-click="selectNode">
                </el-tree>
            </el-form-item>
            <el-form-item label="转正时间" prop="correctionTime">
                <el-date-picker style="width:50%" placeholder="请选择转正时间" v-model="formData.correctionTime" />
            </el-form-item>
        </el-form>
        <!-- footer插槽 : dialog组件的底部内容，需要footer插槽来填充***-->
        <template v-slot:footer>
            <el-row type="flex" justify="center">
                <el-col :span="6">
                    <el-button size="small" @click="btnCancel">取消</el-button>
                    <el-button type="primary" size="small" @click="btnOK">确定</el-button>
                </el-col>
            </el-row>
        </template>
    </el-dialog>
</template>

<script>
import { addEmployeeAPI } from '@/api/employees'
import { getDepartmentsAPI } from '@/api/departments'
import { tranListToTreeDate } from '@/utils'
import EmployeeEnum from '@/api/constant/employees'
export default {
    props: {
        showDialog: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            EmployeeEnum,
            formData: {
                username: '',
                mobile: '',
                formOfEmployment: '',
                workNumber: '',
                departmentName: '',
                timeOfEntry: '',
                correctionTime: ''
            },
            rules: {
                username: [
                    { required: true, message: '用户姓名不能为空', trigger: 'blur' },
                    { min: 1, max: 4, message: '用户姓名为1-4位' }
                ],
                mobile: [
                    // pattern 正则表达式
                    { required: true, message: '手机号不能为空', trigger: 'blur' },
                    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
                ],
                formOfEmployment: [
                    { required: true, message: '聘用形式不能为空', trigger: 'blur' }
                ],
                workNumber: [
                    { required: true, message: '工号不能为空', trigger: 'blur' }
                ],
                //这里的部门比较特殊 , 所以不是失去焦点触发校验规则 (这个是在6.5的时候改为change的)
                departmentName: [
                    { required: true, message: '部门不能为空', trigger: 'change' }
                ],
                timeOfEntry: [
                    { required: true, message: '入职时间', trigger: 'blur' }
                ]
            },
            treeData: [], // 定义数组接收树形数据
            showTree: false, // 控制树形的显示或者隐藏
            loading: false, // 控制树的进度条 显示或者隐藏
        }
    },
    methods: {
        async getDepartments() {
            this.showTree = true
            this.loading = true
            // depts是数组 但不是树形
            const { depts } = await getDepartmentsAPI()
            // 把depts处理成树形结构
            this.treeData = tranListToTreeDate(depts, '')
            this.loading = false
        },
        selectNode(node) {
            this.formData.departmentName = node.name
            this.showTree = false
        },
        async btnOK() {
            try {
                const { $parent, $refs, formData } = this
                await $refs.addEmployee.validate()
                // 发请求 添加新员工的接口
                await addEmployeeAPI(formData)
                this.$message.success('添加成功')
                // 告诉父组件更新数据
                // this.$parent 可以直接调用到父组件的实例 实际上就是父组件this
                $parent.getEmployeeList()
                // 并关闭弹层
                $parent.showDialog = false
            } catch (error) {
                this.$message.error(error && '出错了请稍后再试')
            }
        },
        btnCancel() {
            // 置空表单数据
            this.formData = {
                username: '',
                mobile: '',
                formOfEmployment: '',
                workNumber: '',
                departmentName: '',
                timeOfEntry: '',
                correctionTime: ''
            }
            // 重置校验结果
            this.$refs.addEmployee.resetFields()
            // 通知父组件关闭弹层
            this.$emit('update:showDialog', false)
        }
    }
}
</script>

<style>
</style>